<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="count++">{{count}}</button>
        <button @click="addCount">{{count}}</button>
        <div>{{res}}</div>
        <div>{{res}}</div>
        <div>{{res}}</div>
        <button>{{addCount()}}</button>
        <button>{{addCount()}}</button>
        <button>{{addCount()}}</button>
        <div>{{res}}</div>
        <div>{{res}}</div>
        <div>{{res}}</div>
        <button @click="res++">{{res}}</button>
        <button @click="changeFullName">改变计算属性</button>
        <div>{{fullname}}</div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { ref, reactive, watch, createApp, toRefs, watchEffect, computed } = Vue;
        createApp({
            setup() {
                const count = ref(0);
                const state = reactive({
                    name: "张三",
                    age: 18,
                    girlFriend: {
                        name: '小红',
                        age: 17,
                        foo: {
                            bar: 1
                        }
                    }
                })

                // 计算属性有缓存，只有当依赖的值发生变化时才会重新计算
                // 计算属性的值不可以修改,是只读的
                // 计算属性返回值是一个 ref
                const res = computed(() => {
                    console.log("computed...");

                    return state.age + 1
                })
                // console.log("res==>", res.value);

                const firstname = ref("san")
                const lastname = ref("zhang")

                const fullname = computed({
                    get() { // getter 必须要有返回值

                        return `${firstname.value} ${lastname.value}`
                    },
                    set(val) { // settter 必须要有参数 这里是修改的新值
                        [firstname.value, lastname.value] = val.split(' ')
                    }
                })

                const changeFullName = () => {
                    fullname.value = "si li"
                }

                const addCount = () => {
                    console.log("addCount...");

                    return state.age + 1
                }

                return {
                    count,
                    ...toRefs(state),
                    res,
                    addCount,
                    fullname,
                    changeFullName
                }
            }
        }).mount('#app')
    </script>
</body>

</html>